<template>
	<mu-container class="list-content">
		<mu-list>
			<mu-list-item :ripple="false" button>
				<mu-paper>
					<mu-button small flat :disabled="true">
						<mu-icon left value="apps"></mu-icon>
						配件：行李箱盖
					</mu-button>
					<div class="tb_line"></div>
				</mu-paper>
				<mu-list-item-action>
					<img src="../../assets/img/1.jpg">
				</mu-list-item-action>
				<mu-list-item-content>
					<mu-list-item-sub-title>
						<span style="color: rgba(0, 0, 0, .87)">厂牌车型：雪佛兰SGM7189ATA轿车</span>
					</mu-list-item-sub-title>
					<mu-list-item-sub-title>
						<span style="color: rgba(0, 0, 0, .87);font-weight: 600;">高配：&nbsp;&nbsp;否</span>
					</mu-list-item-sub-title>
				</mu-list-item-content>
			</mu-list-item>
		</mu-list>
		<mu-expansion-panel :expand="false">
			<div slot="header">订单详情</div>
			<div class="tb_line"></div>
			<table>
				<col width="35%" />
				<col width="65%" />
				<tr>
					<td>订单号：</td>
					<td>{{orderno}}</td>
				</tr>
				<tr>
					<td>案件号：</td>
					<td>{{caseno}}</td>
				</tr>
				<tr>
					<td>车型：</td>
					<td>{{cartype}}</td>
				</tr>
				<tr>
					<td>定损员：</td>
					<td>{{persoin}}</td>
				</tr>
				<tr>
					<td>回收公司：</td>
					<td>{{company}}</td>
				</tr>
				<tr>
					<td>定损员电话：</td>
					<td>{{phone}}</td>
				</tr>
				<tr>
					<td>创建时间：</td>
					<td>{{datetime}}</td>
				</tr>
				<tr>
					<td>备注：</td>
					<td>{{memo}}</td>
				</tr>
			</table>
		</mu-expansion-panel>
		<mu-expansion-panel :expand="true" class="upload_panel">
			<div slot="header">回收处理</div>
			<div class="tb_line"></div>
			<div class="upload">上传图片</div>
			<mu-button slot="action" color="success">确认回收</mu-button>
			<mu-button slot="action" color="error">回收失败</mu-button>
		</mu-expansion-panel>
	</mu-container>

</template>

<script>
	import Vue from "vue";
	import '../../utils/common';
	import { immersed } from "@/utils/immersed.js";
	import { openWebviewFast } from "@/utils/webview";
	import { request } from "@/utils/request";
	import MuseUI from 'muse-ui';
	import 'muse-ui/dist/muse-ui.css';
	import '@/assets/muse/MaterialIcons-Regular.css';

	Vue.use(MuseUI);

	export default {
		data() {
			return {
				orderno: 'PA201807141646040',
				caseno: '92500032008333786092',
				cartype: '雪佛兰SGM7189ATA轿车',
				persoin: 'ZHUDEPEND934',
				company: '广州禹名再生资源回收有限公司（合肥）',
				phone: '15856980573',
				datetime: '2018-07-20 14:16:46',
				memo: ''
			}
		},
		methods: {
			openImgs() {
				openWebviewFast(
					"./index.imgs.html",
					"index.imgs",
					"定损图片"
				);
			}
		}
	};
</script>

<style lang="less">
	body {
		background-color: #F1F1F1;
	}
	.list-content {
		flex: 1;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		height: 100%;
		padding-bottom: 10px;
		.mu-item {
			height: 180px;
			margin-bottom: 0px;
			background-color: #fff;
			padding: 0 5px;
			padding-top: 40px;
			.mu-paper {
				position: absolute;
				left: 0;
				top: 0px;
				font-weight: bold;
				background-color: rgba(0, 0, 0, 0);
				width: 100%;
				text-indent: 2px;
				.mu-flat-button.mu-button-small {
					color: #333;
					font-size: 14px;
					height: 28px;
					margin: 8px 0 4px;
					.mu-icon-left {
						margin-top: -2px;
					}
				}
			}
			.mu-item-action {
				width: 40%;
				overflow: hidden;
				max-height: 116px;
				img {
					width: 100%;
					border-radius: 1px;
				}
			}
			.mu-item-content {
				margin-left: 8px;
				position: relative;
				.mu-item-sub-title {
					font-size: 12px;
					line-height: 25px;
				}
			}
		}
	}
	
	.tb_line {
		border: none;
		border-bottom: 1px solid #e1e3e5;
		height: 1px;
		transform: scaleY(0.5);
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		-webkit-transform-origin: 0 0;
	}
	
	table {
		margin: 8px 0 0 0;
		padding: 0;
	}
	
	table tr td:nth-child(1) {
		text-align: right;
		padding-right: 5px;
	}
	
	.upload {
		height: 80px;
		width: 130px;
		border:1px solid #4caf50;
		text-align: center;
		line-height: 80px;
		margin:8px 5px;
	}
	
	.upload_panel .mu-expansion-panel-content {
		padding: 0;
	}
	
	.mu-expansion-panel-header,.mu-expansion-panel__expand .mu-expansion-panel-header {
		min-height: 35px;
	}
	
	.mu-expansion-panel__expand {
		margin: 0px 0 5px;
	}
	
	.mu-expansion-panel-content {
		padding: 0px 0 24px 0px;
	}
</style>